<template>
  <div class="top-date">
    <img :src="dateIcon" alt="" />
    
    <template
      v-if="
        route.name === 'Home' && apiTime.currentDate && apiTime.currentTime
      "
    >
    
      <div class="date">
        {{ apiTime.currentDate }}
      </div>
      <div class="time">{{ apiTime.currentTime }}</div>
    </template>
    <template v-else
    >
      <div class="date">
        {{ state.currentDate }}
      </div>
      <div class="time">{{ state.currentTime }}</div>
    </template>
  </div>
</template>
<script setup>
import dateIcon from "@/assets/date.png";
import { useTimeStore } from "@/stores/dateTime";
import { useRoute } from "vue-router";
const route = useRoute();
console.log('%c [ route ]-30', 'font-size:18px; background:#4faef3; color:#93f2ff;', route)
const timeStore = useTimeStore();
const { state, apiTime } = timeStore;
</script>
<style scoped lang="scss">
.top-date {
  position: absolute;
  left: 22px;
  top: 35px;
  display: flex;
  align-items: center;
  > img {
    vertical-align: middle;
  }
  .date,
  .time {
    margin-left: 16px;
    font-family: "优设标题黑";
    font-size: 24px;
    font-weight: 600;
    line-height: 28px;
    letter-spacing: 0.04em;

    color: #ffffff;
  }
}
</style>
